<template>
  <div>
    <header>
      <div class="lang">
        <p>语言:</p>
        <a href="https://www.onlinebmicalculator.com/">English</a>
        <span>|</span>
        <a href="https://cn.onlinebmicalculator.com/">简体中文</a>
        <span>|</span>
        <a href="https://tw.onlinebmicalculator.com/">繁体中文</a>
      </div>
      <div class="logo">
        <div class="left">
          <img src="https://image.onlinebmicalculator.com/bmi-logo.png"/>
        </div>
        <div class="right">
          <h3>免费在线 BMI 计算器</h3>
          <p>身体质量指数 (Body Mass Index, 简称BMI), 亦称克托莱指数, 是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。BMI 值超标，意味着你必须减肥了。</p>
        </div>
      </div>
    </header>
    <div class="blank"></div>
    <div class="function">
      <div class="calc">
        <div class="title">
          <h1>免费计算你的身体质量指数 (BMI)</h1>
          <div style="display: flex" v-if="isShowState">
            <div id="arrow1">
              <img src="https://image.onlinebmicalculator.com/arrow.png">
            </div>
            <div id="result">您的BMI值：{{bmiForm.bmi}}，身体状态：{{bmiForm.state}}</div>
          </div>
        </div>
        <div class="form">
          <div class="attribute">
            <div class="danwei">度量单位:</div>
            <label>
              <input type="radio" name="danw" value="公制"/>公制&nbsp;&nbsp;&nbsp;
            </label>
            <label>
              <input type="radio" name="danw" value="英制"/>英制
            </label>
          </div>
        </div>
        <div class="form">
          <div class="height">
            <div class="danwei">我的身高:</div>
            <div class="write">
              <input type="text" id="height" v-model="bmiForm.height">单位: 厘米 cm
            </div>
          </div>
        </div>
        <div class="form">
          <div class="weight">
            <div class="danwei">我的体重:</div>
            <div class="write">
              <input type="text" id="weight" v-model="bmiForm.weight">单位: 千克 kg
            </div>
          </div>
        </div>
        <div class="form">
          <div class="BMI-standred">
            <div class="danwei">我的体重:</div>
            <div class="write">
              <select name="cars">
                <option value="中国标准">中国标准</option>
                <option value="国际标准">国际标准</option>
                <option value="日本标准">日本标准</option>
                <option value="新加坡标准">新加坡标准</option>
              </select>
            </div>
          </div>
        </div>
        <div class="form">
          <div class="weight">
            <div class="danwei"></div>
            <div class="write">
              <input type="checkbox">自动保存 BMI 历史记录
            </div>
          </div>
        </div>
        <div class="form">
          <div class="submit">
            <div class="danwei"></div>
            <div class="write">
              <button @click="handleSubmit">计算BMI</button>
            </div>
          </div>
        </div>
      </div>
      <div class="refer">
        <div id="arrow" v-if="isShowState" :style="{top:bmiForm.toTop+'px'}">
          <img src="https://image.onlinebmicalculator.com/arrow.png">
        </div>
        <div class="table-head">BMI 中国标准</div>
        <div class="row1">
          <h3>分类</h3>
          <h3>BMI 范围</h3>
        </div>
        <div class="row2">
          <p>偏瘦</p>
          <p>&lt;=18.4</p>
        </div>
        <div class="row3">
          <p>正常</p>
          <p>18.5～23.9</p>
        </div>
        <div class="row4">
          <p>过重</p>
          <p>24.0～27.9</p>
        </div>
        <div class="row5">
          <p>肥胖</p>
          <p>>= 28.0</p>
        </div>
      </div>
    </div>
    <div id="container" style="width:900px;height:400px;margin: 0 auto"></div>
    <table class="record">
      <thead>
        <tr>
          <td>#</td>
          <td>日期</td>
          <td>身高</td>
          <td>体重</td>
          <td>BMI</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody id="lists">
        <BMIItem
                v-for="(item, index) of bmiList"
                :key="item.id"
                :iid="item.id"
                :index="index"
                :height="item.height"
                :weight="item.weight"
                :bmi="item.bmi"
                :created_at="item.created_at"
                @delete-item="delItem"
        >
        </BMIItem>
      </tbody>
    </table>
    <div class="mask" id="mask" v-if="isMask">
      <div class="tips" id="tips">提醒的文字</div>
    </div>
  </div>
</template>
<script>
import BMIItem from "./components/BMIItem"
export default {
  name: 'App',
  components: {
    BMIItem,
  },
  data() {
    return {
      msg: "你好 vue !!!",
      bmiForm: {
        height: "",
        weight: "",
        bmi:"",
        state:"",
        toTop:""
      },
      isShowState:false,
      isMask:false,
      bmiList: []
    }
  },
  created(){
    this.getData()
    },
  methods: {
    handleSubmit() {
      if (this.bmiForm.height===""||this.bmiForm.weight===""){
        return
        //this.isMask=true
      }else if(isNaN(this.bmiForm.height)||isNaN(this.bmiForm.weight)){
        return
        //this.isMask=true
      } else {
        fetch("http://yizhanketang.com:1010/api/v1/bmi",{
          method:"POST",
          headers:{"Content-Type":"application/json"},
          body:JSON.stringify(this.bmiForm),
          data:{
            height: JSON.stringify(this.bmiForm).height,
            weight: JSON.stringify(this.bmiForm).weight,
          }
        }).then(res =>res.json()).then(res=>{
          this.bmiForm.bmi=res.bmi
          this.bmiForm.state=res.status
          if (res.bmi<=18.4){
            this.bmiForm.toTop=63
          } else if (res.bmi<=23.9&&res.bmi>18.4){
            this.bmiForm.toTop=90
          } else if (res.bmi<=27.9&&res.bmi>24){
            this.bmiForm.toTop=120
          } else if (res.bmi>=28){
            this.bmiForm.toTop=148
          }
          this.isShowState=true,
                  this.getData()
        }).catch(err=>{
          console.log(err)
        })
      }


      // ajax
    },
    getData() {
      fetch("http://yizhanketang.com:1010/api/v1/bmi").then(res => res.json()).then(res => {
        this.bmiList = res
      })
    },
    delItem(id){
      console.log(id)
      fetch(`http://yizhanketang.com:1010/api/v1/bmi/${id}`,{
        method:"DELETE",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(this.bmiForm),
        data:{
          height: JSON.stringify(this.bmiForm).height,
          weight: JSON.stringify(this.bmiForm).weight,
        }
      }).then(res =>res.json()).then(res=>{
        console.log(res)
        this.getData()
      }).catch(err=>{
        console.log(err)
      })
    }
  }
  // template: ""
}
</script>

<style>
/*body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
}*/
*{
  margin: 0;
}
header{
  background-image:linear-gradient(#8DD8F8,#F4FAFD);
}
.lang{
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 63%;
}
.logo{
  width: 900px;
  margin: 0 auto;
  display: flex;
}
.logo .left{
  margin-right: 20px;
}
.right{
  padding-top: 15px;
}
.right h3{
  color: #444444;
}
.right p{
  color: #666;
  font-size: 63%;
  margin-top: 10px;
}
/*body*/
section{}
.blank{
  width: 900px;
  height: 100px;
  margin: 0 auto;
}
.function{
  width: 900px;
  margin: 0 auto;
  line-height: 180%;
  display: flex;
  justify-content: space-between;
}
.attribute{
  display: flex;
}
.danwei{
  width: 120px;
}
.title h1{
  margin: 10px 0;
  font-size: 18px;
}
.height,
.weight,
.BMI-standred,
.submit{
  display: flex;
}
.write input{
  margin-right: 10px;
}
select{
  width:170px
}
.submit button{
  width:160px
}
.row1,
.row2,
.row3,
.row4,
.row5{
  display: flex;
  justify-content: space-around;
}
.refer{
  width: 350px;
  position: relative;
}
#arrow{
  position: absolute;
  left:-25px;
}
.row1{
  background-color:#8DD8F8;
}
.row2{
  background-color: rgb(204, 204, 204);
}
.row3{
  background-color: rgb(102, 204, 0);
}
.row4{
  background-color: rgb(255, 255, 0);
}
.row5{
  background-color: rgb(255, 153, 0);
}
#result{
  width: 100%;
  height: 29px;
  border: 1px dotted black;
  background-color: yellow;
  line-height: 29px;
  padding-left: 30px;
  box-sizing: border-box;
  position: relative;
}
.record{
  width: 900px;
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
}
.record thead{
  color: white;
  font-size: 12px;
  background: #7CB5EC;
  vertical-align: middle;
  height: 27px;
}
tbody tr{
  height: 40px;
  border-bottom:#687888 solid 1px ;
}
.mask {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .3);
  align-items: center;
  justify-content: center;
}

.mask .tips {
  justify-content: center;
  width: 250px;
  text-align: center;
  border-radius: 7px;
  padding: 20px 30px;
  background-color: #fff;
  font-size: 24px;
}

</style>
